<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- 先准备一个根容器 -->
  <div id="app">
    <h1>{{ msg }}</h1>
    <button @click="onBtnClick">逆转世界</button>
  </div>

  <!-- 引入核心包，全局就会有一个 Vue 构造函数 -->
  <script src="./vue.js"></script>
  <script>
    // 创建 Vue 实例
    new Vue({
      el: '#app', // 容器选择器
      data: {
        msg: 'Hello, World'
      },
      methods: {
        onBtnClick() {

          // // 所有方法中的 this 指向当前 Vue 实例对象
          
          // // 1. 获取到 msg 字符串，将其先拆成由一个个的字符组成的数组
          // // 为什么可以通过 this.msg 获取到 msg 呢？因为 Vue 会将所有的 data 挂载到当前 Vue 实例身上
          // // split 如果不传参数，则直接将字符串转成一个由原字符串组成的数组（就一个元素）
          // // 要传一个空字符串作为分隔符，意为将每一个字符拆出来
          // const arr = this.msg.split('')
          // // 2. 将数组逆序（翻转）
          // // reverse 调用完后，会改变原数组，所以不用接收其返回值，因为调用完后，本身就已经逆序了
          // // 会改变原数组的方法，称为：变异方法，反之，称为：非变异方法
          // arr.reverse()
          // // 3. 将逆序后的数组再拼接成字符串
          // // join 如果不传参数，会以逗号来拼接，所以要传一个空字符串，因为我们不需要分隔符，只是纯粹的拼接
          // // 又因为 join 方法是非变异方法，所以，需要接收拼接好的返回值
          // const reversedMsg = arr.join('')
          // // 4. 赋值给 msg
          // this.msg = reversedMsg

          // // 如何排查错误：逐步确认，顺藤摸瓜，先找入口，一步步深入
          // // 充分利用浏览器的控制台去做代码执行结果尝试
          // // 初学者写代码，防止或者减少BUG的方法：逐步确认，不要一次性把所有代码写完再去调试，要早发现早治疗，防止得癌

          // 其实，上面的步骤可以写成一行代码
          // split返回一个数组，reverse也返回逆序后的数组
          this.msg = this.msg.split('').reverse().join('')
        }
      }
    })
  </script>
</body>
</html>